<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #box{
            height:100px;
            width:100px;
            background-color: red;
            margin:100px;
        }
        .parent{
            height:300px;
            width:300px;
            background-color: blue;
            margin:100px;
            overflow: hidden;
            position: relative;
            border:5px solid black;
        }
        .parentp{
            height:500px;
            width:500px;
            background-color: pink;
            margin:100px;
            overflow: hidden;
            position: relative;
            border:5px solid black;
        }
    </style>
</head>
<body>
    <!-- 盒子模型的十三个属性 -->
    <div class="parentp">
        <div class="parent" id="par">
            <div id="box"></div>
         </div>
     </div>
    
    <script>
        //求元素距离 body的顶部 和 左侧距离
        function offset(ele){
           let parent=ele.offsetParent;
           let top=ele.offsetTop;
           let left=ele.offsetLeft;
           while(parent){//null--false
               top += parent.offsetTop+parent.clientTop;
               left += parent.offsetLeft+parent.clientLeft;
               parent=parent.offsetParent;  
           }
           return {
              top,
              left
           }
        }

        console.log(offset(par).top);
        console.log(offset(par).left);
    </script>
</body>
</html>